<template>
  <div class="m-4 mr-0 overflow-auto bg-white">
    <a-spin :spinning="loading">
      <template v-if="userIdentity === '2'">
        <!--组织机构树-->
        <BasicTree v-if="!treeReloading" title="部门列表2" toolbar search showLine :checkStrictly="true" :clickRowToExpand="false" :treeData="treeData" :selectedKeys="selectedKeys" :expandedKeys="expandedKeys" :autoExpandParent="autoExpandParent" @select="onSelect" @expand="onExpand" @search="onSearch" />
      </template>
      <a-empty v-else description="普通员工无此权限" />
    </a-spin>
  </div>
</template>

<script lang="ts" setup>
import { inject, nextTick, ref, onMounted } from 'vue';
import { useMessage } from '/@/hooks/web/useMessage';
import { BasicTree } from '/@/components/Tree';
import { getDeptTree } from '/@/api/common/api';

const prefixCls = inject('prefixCls');
const emit = defineEmits(['select']);
const { createMessage } = useMessage();

let loading = ref<boolean>(false);
// 部门树列表数据
let treeData = ref<any[]>([]);
// 当前展开的项
let expandedKeys = ref<any[]>([]);
// 当前选中的项
let selectedKeys = ref<any[]>([]);
// 是否自动展开父级
let autoExpandParent = ref<boolean>(true);
// 用户身份
let userIdentity = ref<string>('2');
// 树组件重新加载
let treeReloading = ref<boolean>(false);

// 默认执行一次
onMounted(() => {
  loadDepartTreeData();
});

// 加载部门信息
function loadDepartTreeData() {
  loading.value = true;
  treeData.value = [];
  getDeptTree(({ type: 1 })).then((res) => {
    if (Array.isArray(res)) {
      treeData.value = res;
      autoExpandParentNode();
    }
  }).finally(() => (loading.value = false));
}

// 自动展开父节点，只展开一级
function autoExpandParentNode() {
  let keys: Array<any> = [];
  treeData.value.forEach((item, index) => {
    if (item.children && item.children.length > 0) {
      keys.push(item.key);
    }
    if (index === 0) {
      // 默认选中第一个
      setSelectedKey(item.id, item);
    }
  });
  if (keys.length > 0) {
    reloadTree();
    expandedKeys.value = keys;
  }
}

// 重新加载树组件，防止无法默认展开数据
async function reloadTree() {
  await nextTick();
  treeReloading.value = true;
  await nextTick();
  treeReloading.value = false;
}

/**
 * 设置当前选中的行
 */
function setSelectedKey(key: string, data?: object) {
  selectedKeys.value = [key];
  if (data) {
    emit('select', data);
  }
}

// 搜索事件
function onSearch(value: string) {
  if (value) {
    loading.value = true;
    getDeptTree({ keyWord: value, type: 1 })
      .then((result) => {
        if (Array.isArray(result)) {
          treeData.value = result;
        } else {
          createMessage.warning('未查询到部门信息');
          treeData.value = [];
        }
      })
      .finally(() => (loading.value = false));
  } else {
    loadDepartTreeData();
  }
}

// 树选择事件
function onSelect(selKeys, event) {
  if (selKeys.length > 0 && selectedKeys.value[0] !== selKeys[0]) {
    setSelectedKey(selKeys[0], event.selectedNodes[0]);
  } else {
    // 这样可以防止用户取消选择
    setSelectedKey(selectedKeys.value[0]);
  }
}

// 树展开事件
function onExpand(keys) {
  expandedKeys.value = keys;
  autoExpandParent.value = false;
}
</script>
<style lang="less" scoped>
/*升级antd3后，查询框与树贴的太近，样式优化*/
:deep(.jeecg-tree-header) {
  margin-bottom: 6px;
}
</style>
